<template>
	<div>
		<div  class="my-1 flex align-center">
			<Button type="success" @click="addUser">添加用户</Button>
			 <Input search enter-button placeholder="输入用户昵称" @on-search="search()"
			  class="ml-3" style="width: 300px;" v-model="searchData"/>
		</div>
		<Table border :columns="columns12" :data="userList">
			
		    <template slot-scope="{ row }" slot="name">
		        <strong>{{ row.name }}</strong>
		    </template>
		    <template slot-scope="{ row, index }" slot="action">
		        <Button type="primary" size="small" style="margin-right: 5px" @click="show(row)">编辑</Button>
		       <Poptip
				   confirm
				   placement="left"
				   title="是否注销?"
				   @on-ok="dels(row)">
				  <Button type="error" size="small" >注销</Button>
		       </Poptip>
		    </template>
		</Table>
		<div class="mt-5 w_100 flex justify-center">
			 <Page :total="total" show-sizer @on-change="getUserList" @on-page-size-change="getList"
			 :page-size-opts="[2, 5, 10]"/>
		</div>
		<!-- 对话框 -->
		 <Modal
		   v-model="showModel"
		   title="用户操作"
		   @on-ok="isOk"
		   @on-cancel="cancel">
		  <Form :model="formData" label-position="left" :label-width="100">
			  <FormItem label="登录账号">
				  <Input v-model="formData.loginName" :disabled="disabled"></Input>
			  </FormItem>
			  <FormItem label="登录密码">
				  <Input v-model="formData.password" :disabled="disabled"></Input>
			  </FormItem>
			  <FormItem label="昵称">
				  <Input v-model="formData.nikeName"></Input>
			  </FormItem>
			  <FormItem label="签名">
				  <Input v-model="formData.signature"></Input>
			  </FormItem>
		  </Form>
		</Modal>
	</div>
		
</template>
<script>
	import {list,regtis,update,del,like} from '../api/user.js'
    export default {
        data () {
            return {
                columns12: [
					{
						type: 'index',
						width: 60,
						align: 'center'
					},
                    
                    {
                        title: 'id',
                        key: 'id',
						width:150,
						tooltip:true
                    },
                    {
                        title: '账号',
                        key: 'loginName'
                    },
					{
					    title: '昵称',
					    key: 'nikeName'
					},
					{
					    title: '签名',
					    key: 'signature'
					},
					{
					    title: '创建时间',
					    key: 'createTime',
						render:(h,p)=>{
							return h('span',{},this.dateFilter(p.row.createTime))
						}
					},
                    {
                        title: '操作',
                        slot: 'action',
                        width: 150,
                        align: 'center'
                    }
                ],
                total:10,//数据总数
				userList:[],//用户数据
				showModel:false,//显示对话框
				isEdit:false,//修改的状态
				disabled:false,//禁止输入
				ID:'',//修改数据
				searchData:"",//搜索数据
				isSearch:false,
				limit:10,
				pageNum:1,
				formData:{
					loginName:'',
					nikeName:'',
					password:'',
					signature:''
				}
			}
        },
        created() {
        	this.getUserList()
        },
		methods: {
			async search(){
				if(this.searchData == "") this.isSearch=false
				else this.isSearch = true
				this.getUserList()
			},
			 async getUserList(num){//获取用户数据
				 let params = new URLSearchParams();
				 params.append("pageNum",num?num:1);
				 params.append("limit",this.limit);
				 let res;
				if(this.isSearch){
					params.append("nikeName",this.searchData)
					 res = await like(params)
				}else{
					res = await list(params)
				}
				console.log("------<>",res)
				this.total = res.data.data.count
				this.userList = res.data.data.list
				
			 },
			 async getList(num){
				this.limit = num
				this.getUserList()
			 },
			 addUser(){
				 this.showModel=true
				 this.isEdit=false
				 this.disabled=false
			 },
			async dels(row){
				if(row.loginName == "admin"){
					this.$Message.error("该用户不允许注销")
				}else{
					let par = new URLSearchParams()
					par.append("id",row.id)
					 let res = await del(par)
					 if(res.data.code==200){
						 this.$Message.success("注销成功")
					 }else{
						 this.$Message.error("注销失败")
					 }
					 this.getUserList()
				}
			 },
			 async isOk(){
				 let params = new URLSearchParams()
				 params.append("nikeName",this.formData.nikeName)
				 params.append("signature",this.formData.signature)
				 let res ;
				 if(this.isEdit){
					 params.append("id",this.ID )
					 res = await update(params)
				 }else{
					 params.append("loginName",this.formData.loginName)
					 params.append("password",this.formData.password)
					 res = await regtis(params)
				 }
				 this.getUserList()
				 console.log("----------<>",res)
				 
			 },
			 cancel(){
				 this.showModel = false
			 },
			 dateFilter(date) {//过滤时间
			   var result = this.moment(date).format('YYYY-MM-DD HH:mm')
			   return result
			 },
            show (row) { //修改
				console.log(row)
                this.disabled=true
				this.isEdit=true
				this.showModel = true
				this.editData = row
				this.formData.loginName = row.loginName
				this.formData.password = row.password
				this.formData.nikeName = row.nikeName
				this.formData.signature = row.signature
				this.ID = row.id
            },
            remove (row) {
                this.data6.splice(index, 1);
            }
        }
    }
</script>
